import React, { Component } from 'react';
import { Row, Col, ConfigProvider } from 'antd';

import Incidence from './Incidence';
import empty from '@/assets/images/empty.png';
import Header from './components/Header'
import Cards from './components/Card'
import CheckDetails from './components/CheckDetails'

class UnitReport extends Component<any, any> {
  customizeRenderEmpty = () => (
    <Row style={{ height: '381px', flexDirection: 'column' }} type="flex" justify="space-between">
      <Col span={24}>
        <img src={empty} height={'170px'} />
      </Col>
      {/* <Col span={24}>暂无数据</Col> */}
    </Row>
  );

  render() {

    return (
      <ConfigProvider renderEmpty={this.customizeRenderEmpty}>
        <section className="report" style={{ width: '100%', background: '#F0F3FA' }}>
          <Row style={{ height: '140px' }}>
            <Header domRef={this} />
          </Row>
          <div style={{ width: '100%', marginTop: '20px', display: 'flex', justifyContent: 'space-between', paddingBottom: '20px' }}>
            <Cards />
          </div>
          <Row style={{ background: '#F0F3FA', height: '562px' }} gutter={18}>
            <Col span={12} style={{ height: '100%' }}>
              <Incidence month={new Date().getMonth() > 0 ? new Date().getMonth() : 1} />
            </Col>
            <Col span={12} style={{ height: '100%' }}>
              <Incidence month={(new Date().getMonth() - 1) > 0 ? (new Date().getMonth() - 1) : 12} />
            </Col>
          </Row>
          <Row>
            <CheckDetails />
          </Row>
        </section>
      </ConfigProvider>
    );
  }
}

export default UnitReport;


